<template>
  <div class="container">
    <div class="main-title">主应用</div>
    <div class="form-container">
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label="登陆名"
            name="username"
            :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username"/>
        </a-form-item>

        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password"/>
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {useRouter} from "vue-router";
import {FormState} from './interface'

const formState = reactive<FormState>({
  username: 'admin',
  password: '000000',
  remember: true,
});
const bgColor = ref<String>('skyblue')
const router = useRouter()
const onFinish = (values: FormState) => {
  console.log('Success:', values);
  if (values.username !== 'admin' || values.password !== '000000') return
  router.push({
    path: "/main-vite/home"
  })
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: v-bind(bgColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .main-title {
    font-size: 55px;
    color: #fff;
    margin-bottom: 30px;
  }

  .form-container {
    width: 300px;
    //background: #535bf2;
  }
}
</style>
